

<template>
    <div class="cartControl">
        <transition name="move">
            <div class="cart-decrease" v-show="food.count > 0" @click.stop="decreaseCart">
                <span class="inner icon-remove_circle_outline"></span>
            </div>
        </transition>
        <div class="cart-count" v-show="food.count > 0">{{food.count}}</div>
        <div class="cart-add" @click.stop="addCart">
            <span class="icon-add_circle"></span>
        </div>
    </div>
</template>




<script>

import Vue from 'vue';

export default {
    props: {
        food: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    methods: {
        addCart(event){
            if(!event._constructed){    //在pc端执行一次点击事件
                return;
            }
            if(!this.food.count){
                Vue.set(this.food, 'count', 1);   //添加自定义字段的时候，用Vue.set()这个方法
            }else{
                this.food.count ++;
            }
            this.$emit('add', event.target);   //派发一个事件，将对象本身当做参数传给父级组件
        },
        decreaseCart(){
            if(!event._constructed){    //在pc端执行一次点击事件
                return;
            }
            this.food.count --;
        }
    }
}
</script>


<style scope lang="stylus" rel="stylesheet/stylus">
    
    .cartControl{
        font-size: 0;
        .cart-decrease, .cart-add{
            display: inline-block;
            padding: 6px;
            font-size: 22px;
            color: rgb(0,160,220);
            &.move-enter-active, &.move-leave-active{
                transition: all 0.5s linear;
                opacity: 1;
                transform: translate3d(0,0,0);
                &.inner{
                    transform: rotate(0deg); 
                }
            }
            &.move-enter, &.move-leave-to{
                opacity: 0;
                transform: translate3d(24px,0,0);
                &.inner{
                    transform: rotate(180deg);
                }
            }
        }
        .cart-count{
            display: inline-block;
            vertical-align: 5px;
            font-size: 14px;
            color: #999;
        }
    }

</style>











